<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习vue</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin: 6px;
        }
    </style>
</head>
<body>
    <div id="root">
        <h1 :style="{opacity}">欢迎学习Vue</h1>
        <button @click="stopChange">停止</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            data:{
                opacity:1
            },
            computed:{
            },
            methods:{
                stopChange(){
                    // clearInterval(this.timer)
                    this.$destroy()
                }
            },
            watch:{
            },
            filters:{
            },
            directives:{
            },
            //初始化生命周期和事件已经完成，但数据代理还没有开始
            beforeCreate() {
                //这个时候this还没有_data，还读不到data的数据
                console.log("beforeUpdate",this)
                //调试模式的时候代码运行到这里的时候会暂停
                // debugger
            },
            //初始化数据代理数据检测完成，还没有生成虚拟dom
            created() {
                //这个时候this可以读到data的数据了
                console.log("created",this)
                // debugger
            },
            //生成虚拟dom完成，还没有挂载真实dom
            beforeMount() {
                console.log("beforeMount",this)
                // debugger
            },
            //挂载真实dom完成
            //常用的生命周期勾子
            mounted(){
                this.timer = setInterval(() => {
                    if(vm.opacity<=0){
                        this.direction = 1
                    }else if(vm.opacity>=0.98){
                        this.direction = 0
                    }
                    if(this.direction === 1){
                        vm.opacity += 0.01
                    }else if(this.direction === 0){
                        vm.opacity -= 0.01
                    }
                }, 16);
                console.log("mounted",this)
            },
            //页面数据更改前。此时，页面是旧的，数据是新的
            beforeUpdate() {
                console.log("beforeUpdate",this)
                // debugger
            },
            //页面数据更改完成。此时，页面是新的，数据是新的
            updated() {
                console.log("updated",this)
                // debugger
            },
            //常用的生命周期勾子
            //调用vm.$destroy()来数据销毁前，不会销毁dom绑定的事件
            beforeDestroy() {
                console.log("beforeDestroy",this)
                clearInterval(this.timer)
                // debugger
            },
            //调用vm.$destroy()来数据销毁完成后
            destroyed() {
                console.log("destroyed",this)
                // debugger
            },
            // router-view里面的组件被激活
            activated() {
                
            },
            // router-view里面的组件被取消激活
            deactivated() {
                
            },
            // 当vue把真实dom放入页面之后调用$nextTick
            // this.$nextTick(function () {});
        })
    </script>    
</body>
</html>